<template>
	<view style="margin-top: 32rpx;padding: 0rpx 32rpx;">
		<!-- 动态列表-行业/公司动态 -->
		<view v-for="(item,index) in informationList" :key="index">
			<view class="label">{{ title[index] }}</view>
			<scroll-view scroll-y="true" style="max-height: 860rpx;">
				<Recommendation :recommendationList="item">
				</Recommendation>
				<view class="more" @click="getMore(index)">
					{{ isFinish[index]? '已加载全部内容' : '点击查看更多' }}
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import Recommendation from '../index/components/recommendation.vue'
	export default {
		components:{Recommendation},
		data() {
			return {
				form: [{
					pageNo:1,
					pageSize:5,
					type:1 // 1行业动态
				},
				{
					pageNo:1,
					pageSize:5,
					type:2 // 2公司动态
				}],
				title:['行业动态','公司动态'],
				// 1行业动态  2公司动态
				informationList:[[],[]],
				isFinish:[false,false]
			}
		},
		async onLoad() {
			await this.getIndex();
			// ui强刷
			this.$forceUpdate();
			// this.recommendationList.push(...this.recommendationList);
		},
		methods: {
			async getIndex(){
				for(let i = 0;i<this.title.length;i++){
					let informationRes = await this.$api.carInformation(this.form[i]);
					if(!informationRes?.success){
						uni.showToast({title:"数据获取失败！",icon:"error"})
						return;
					}
					const informationResult = informationRes.result;
					this.informationList[i] = informationResult.records;
					this.isFinish[i] = informationResult.total<=informationResult.size;
				}
			},
			
			// 查看更多
			async getMore(index){
				if(!this.isFinish[index]){
					this.form[index].pageNo++;
					let informationRes = await this.$api.carInformation(this.form[index]);
					if(!informationRes?.success){
						uni.showToast({title:"数据获取失败！",icon:"error"})
						return;
					}
					const informationResult = informationRes.result;
					this.informationList[index].push(...informationResult.records);
					this.isFinish[index] = informationResult.total<=this.informationList[index].length;
					// 这个地方h5不能及时刷新，小程序却可以
					this.$forceUpdate();
				}
			}
		}
	}
</script>

<style>
page{
	background-color: #F5F5F5;
}
</style>
<style scoped lang="scss">
.label{
	font-family: PingFang SC, PingFang SC;
	font-weight: bold;
	font-size: 28rpx;
	color: rgba(0,0,0,0.65);
	margin-bottom: 20rpx;
}
.more{
	margin-top: 36rpx;
	font-family: PingFang SC, PingFang SC;
	font-weight: 500;
	font-size: 26rpx;
	color: #c8c8c8;
	width: 100%;
	text-align: center;
	padding-bottom: 28rpx;
}
</style>
